<template>
  <div>
    <!-- 总览 start -->
    <div class="box">
      <div style="display:flex;flex-direction: row;width: 33%">
        <div class="pic">
          <div class="pic_coler" style="background: #FD9800;">
            <img
              alt="tiepai"
              class="body-pic"
              src="@/assets/img/sms/tiepai.png"
            />
          </div>
        </div>
        <div class="box-text">
          <div class="body_header">
            <span>贴牌设备数</span>
          </div>
          <div class="body_box">
            <span>{{ platformData.omsTotal || 0 }}</span>
          </div>
          <!-- <div class="body-surplus">剩余：300</div> -->
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div style="display:flex;flex-direction: row;width: 33%">
        <div class="pic">
          <div class="pic_coler" style="background: #FF8A8A;">
            <img
              alt="daili"
              class="body-pic"
              src="@/assets/img/sms/daili.png"
            />
          </div>
        </div>
        <div class="box-text">
          <div class="body_header">
            <span>代理设备数</span>
          </div>
          <div class="body_box">
            <span>{{ platformData.pmsTotal || 0 }}</span>
          </div>
          <!-- <div class="body-surplus">剩余：300</div> -->
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div style="display:flex;flex-direction: row;width: 33%;">
        <div class="pic">
          <div class="pic_coler" style="background: #82D2FF;">
            <img alt="qiye" class="body-pic" src="@/assets/img/sms/qiye.png" />
          </div>
        </div>
        <div class="box-text">
          <div class="body_header">
            <span>企业设备数</span>
          </div>
          <div class="body_box">
            <span>{{ platformData.emsTotal || 0 }}</span>
          </div>
          <!-- <div class="body-surplus">剩余：300</div> -->
        </div>
      </div>
    </div>
    <!-- 总览 end -->

    <!-- 数据统计 start -->
    <el-col :span="24">
      <index-data-line
        :use-data-day-range-info="useDataDayRangeInfo"
        style="margin-bottom: 10px"
      ></index-data-line>
      <div style="display: flex;justify-content: space-between">
        <el-card class="box-card">
          <div class="box-card-header">
            <span style="color: #1074fd;font-size: 20px;font-weight: 700"
              >企业销售 top5（贴牌）</span
            >
          </div>
          <div
            v-for="(item, index) in emsDataList"
            :key="item.id"
            class="text item"
          >
            <div
              style="display: flex;flex-direction: row;justify-content: space-between"
            >
              <div class="no1">
                <div class="no11">
                  {{ "NO." + (index + 1) }}
                </div>
              </div>
              <div class="no2">{{ item.organName }}</div>
              <div class="no3">{{ item.total }} (码)</div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card">
          <div class="box-card-header">
            <span style="color: #1074fd;font-size: 20px; 20px;font-weight: 700"
              >代理销售 top5（贴牌）</span
            >
          </div>
          <div
            v-for="(item, index) in pmsDataList"
            :key="item.id"
            class="text item"
          >
            <div
              style="display: flex;flex-direction: row;justify-content: space-between"
            >
              <div class="no1">
                <div class="no11">
                  {{ "NO." + (index + 1) }}
                </div>
              </div>
              <div class="no2">{{ item.organName }}</div>
              <div class="no3">{{ item.total }} (码)</div>
            </div>
          </div>
        </el-card>
      </div>
    </el-col>
    <!-- 数据统计 end -->
  </div>
</template>

<script>
import API from "@/network/api/smsindexApi";
import IndexDataLine from "./components/indexDataLine";
import { createSign } from "@/utils/sign";

export default {
  name: "index",
  components: {
    IndexDataLine
  },
  data() {
    return {
      emsDataList: [],
      pmsDataList: [],
      IndexData: {
        currentOrganId: 0,
        timestamp: ""
      },
      useDataDayRangeInfo: {
        useDataDayRangeOms: [],
        useDataDayRangePms: [],
        useDataDayRangeEms: []
      },
      platformData: {
        omsTotal: "",
        pmsTotal: "",
        emsTotal: ""
      },
      fiveData: {
        organCode: 0,
        level: "",
        timestamp: ""
      }
    };
  },
  created() {
    this.currentUserInfo = JSON.parse(localStorage.getItem("updateUserInfo"));
    this.requestIndexData();
    this.requestPmsFiveData();
    this.requestEmsFiveData();
  },
  methods: {
    requestIndexData() {
      const that = this;
      that.IndexData.currentOrganId = that.currentUserInfo.organId;
      that.IndexData.timestamp = new Date().getTime();
      that.IndexData.sign = createSign(JSON.stringify(that.IndexData));
      API.queryIndexData(that.IndexData).then(res => {
        if (res.data.data.length !== 0) {
          const smsData = res.data.data;
          that.useDataDayRangeInfo.useDataDayRangeOms = smsData;
          that.useDataDayRangeInfo.useDataDayRangePms = smsData;
          that.useDataDayRangeInfo.useDataDayRangeEms = smsData;
          // 获取最新一天的数据展示
          that.platformData.omsTotal = smsData[smsData.length - 1].omsTotal;
          that.platformData.pmsTotal = smsData[smsData.length - 1].pmsTotal;
          that.platformData.emsTotal = smsData[smsData.length - 1].emsTotal;
        }
      });
    },
    requestPmsFiveData() {
      this.fiveData.organCode = this.currentUserInfo.organCode;
      this.fiveData.level = "PMS";
      this.fiveData.timestamp = new Date().getTime();
      if (this.fiveData.sign) {
        delete this.fiveData.sign;
      }
      // console.log(JSON.stringify(this.fiveData))
      this.fiveData.sign = createSign(JSON.stringify(this.fiveData));
      API.queryFive(this.fiveData).then(res => {
        if (res.data.data.length !== 0) {
          const ref = res.data.data;
          this.pmsDataList = ref;
        }
      });
    },
    requestEmsFiveData() {
      this.fiveData.organCode = this.currentUserInfo.organCode;
      this.fiveData.level = "EMS";
      this.fiveData.timestamp = new Date().getTime();
      if (this.fiveData.sign) {
        delete this.fiveData.sign;
      }
      this.fiveData.sign = createSign(JSON.stringify(this.fiveData));
      API.queryFive(this.fiveData).then(res => {
        if (res.data.data.length !== 0) {
          const ref1 = res.data.data;
          this.emsDataList = ref1;
        }
      });
    }
  }
};
</script>

<style scoped>
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 100px;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
}
.box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  width: 100%;
  margin-bottom: 10px;
  padding: 37px 0 43px 0;
  border-radius: 5px;
}

.box-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.body_header {
  color: #999999;
  font-size: 18px;
  text-align: center;
}

.body_box {
  font-size: 22px;
  text-align: center;
  color: #333333;
  font-weight: bold;
  margin-top: 13px;
  margin-bottom: 5px;
  border-bottom: 1px #fd9800 solid;
}

.body-surplus {
  color: #fd9800;
  font-size: 18px;
}

.body_yu {
  color: rgba(193, 193, 193, 100);
  font-size: 14px;
  text-align: center;
}

.body-pic {
  width: 40px;
  height: 40px;
}
.pic {
  width: 50%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}
.pic_coler {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  justify-content: center;
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 45%;
}

.box-card-header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.no1 {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.no11 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1074fd;
  font-weight: 700;
  width: 50%;
  border-radius: 60px;
  padding: 3px;
}

.no2 {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
}

.no3 {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999999;
}

/deep/ .box-card[data-v-15a6c48c] {
  width: 49%;
}
</style>
